<template>
	<view class="fun-flex-col page group">
		
		<view class="fun-flex-col">
			<view class="fun-flex-col fun-self-stretch section_3">
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font_2 text_3" :class="productInfo.oneYear < 0 ? 'fall-text' : 'rise-text'">{{productInfo.oneYear}}%</text>
					<text class="font_2 text_4" :class="productInfo.dailyyield < 0 ? 'fall-text' : 'rise-text'">{{productInfo.dailyyield}}%</text>
					<view class="text-wrapper">Fixed Income</view>
				</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center fun-mt-6">
					<text class="font_4">Yearly Return</text>
					<text class="font_4">Daily Return</text>
					<text class="font_5 text_7">Asset Class</text>
				</view>
			</view>
		</view>
		
		<view class="fun-flex-col section_4">
			<view class="fun-flex-col">
				<text class="font">Summary</text>
				<view class="divider_3"></view>
				<view class="section_7 rich-content">
					<rich-text class="font_8 text_48" :nodes="productInfo.summary"></rich-text>
				</view>
			</view>
			
			<view class="fun-flex-col">
				<text class="font">Transaction Rules</text>
				<view class="fun-flex-col section_7">
					<!-- <text class="fun-self-start font_5 text_41">Product Settelment Instructions</text> -->
					<view class="fun-self-stretch divider_3"></view>
					<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_20 mt-13">
						<text class="font_6 text_16 text_42">Performance Fee</text>
						<text class="font_5 text_43">{{productInfo.serviceCharge}}%</text>
					</view>
					
					<view class="group_20">
						<view class="fun-flex-row fun-items-start fun-justify-between">
							<text class="font_3 text_16 instruc-title">Detailed Description</text>
							<text class="instruc-text">
								This fund currently does not charge any subscription, redemption, or sales fees.
							</text>
						</view>
						
						<view class="fun-flex-row fun-items-start fun-justify-between instruc-first">
							<text class="font_3 text_16 instruc-title">Earnings</text>
							<text class="instruc-text">
								 Once you invest in this product, your principal will earn dividends at the agreed fixed rate. Dividends are credited daily to your available balance automatically.
							</text>
						</view>
						
						<view class="fun-flex-row fun-items-start fun-justify-between">
							<text class="font_3 text_16 instruc-title">Redemption</text>
							<text class="instruc-text">
								The fund is open for daily redemptions. When you decide to redeem your investment, you will need to manually submit a redemption request.
							</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="fun-flex-col section_4">
			
			
				<view class="fun-flex-col section_8">
					<view class="fun-flex-row fun-justify-between fun-items-center group_22">
						<text class="font text_46">Introduction</text>
					</view>
					<view class="fun-flex-col group_23">
						<view class="group_24">
							<view class="text_47">Summary</view>
							<rich-text class="font_8 text_48" :nodes="productInfo.summary"></rich-text>
						</view>
						<view class="group_25">
							<!-- <view class="text_49">Arbitrage Opportunities: Capturing Market Inefficiencies</view> -->
							<view class="text_49">{{productInfo.subtitle}}</view>
							<text class="font_8 text_48 text_50" v-html='productInfo.content'></text>
						</view>
					</view>
				</view>
			
		</view>
		
		<view class="file-wrap fun-flex-row fun-justify-between fun-items-center" @click="toFacts">
			<text>Fund Facts</text>
			<image src="@/static/common/arrow_right_black.png"></image>
		</view>
		
		<view class="btn_wrap">
			<view class="btn" :class="productInfo.status == 1 ? 'buy' : ''" @click="toBuy">Buy</view>
		</view>
	</view>
</template>

<script>
	import {fixedproductdesc} from "@/api/products.js"
	import chartArea from "@/components/chartArea.vue"
	import {roundToDecimal} from "@/common/js/func.js"
	export default {
		data() {
			return {
				pid:null,
				productInfo:{},
				chartData:{},
				opts:{
					color:["#007AFF"],
					"dataLabel":false,
					legend: {
						show:false
					},
				}
			};
		},
		
		onLoad(option) {
			const title = option?.name || "";
			this.pid = this.UTILS.stringToNum(option?.pid);
			uni.setNavigationBarTitle({
				title: title
			});
			this.getFixedproductdesc()
		},

		methods: {
			getFixedproductdesc(){
				const params = {pid:this.pid}
				fixedproductdesc(params).then(res => {
					if(res.code == 0){
						this.productInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			//closed转态的产品无法购买
			toBuy(){
				if(this.productInfo.status == 1){
					uni.navigateTo({url:`/pages/products/buy?pid=${this.pid}&title=${this.productInfo.title}&minimumAmount=${this.productInfo.minimumAmount}`})
				}else{
					this.UTILS.logStr("Unable to purchase temporarily")
				}
				
			},
			
			toFacts(){
				const fileList = [
					{name:this.productInfo?.filename1,downUrl:this.productInfo?.filedown1},
					{name:this.productInfo?.filename2,downUrl:this.productInfo?.filedown2},
					{name:this.productInfo?.filename3,downUrl:this.productInfo?.filedown3},
					{name:this.productInfo?.filename4,downUrl:this.productInfo?.filedown4}
				]
				const fileData = JSON.stringify(fileList);
				uni.navigateTo({url:`/pages/products/productFacts?fileList=${fileData}`})
			}
		},
		components:{
			chartArea
		}
	};
</script>

<style scoped lang="scss">
	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-25 {
		margin-top: 50rpx;
	}

	.ml-89 {
		margin-left: 178rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 36rpx 28rpx 180rpx 28rpx;
			.section_3 {
				padding: 24rpx 60rpx 24rpx 24rpx;
				background-color: #f6f6f6;
				border-radius: 16rpx;
				.group_2 {
					padding-left: 20rpx;
					.font_2 {
						font-size: 32rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						color: #51844d;
					}
					.fall-text{
						color: #CA5456					}
					.text-wrapper{
						padding: 4rpx 30rpx;
						background: #1A7B99;
						border-radius: 4px 4px 4px 4px;
						font-weight: 500;
						font-size: 12px;
						color: #fff;
					}
				}
			}

			.font_4 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #000000;
			}

			.text_8 {
				margin-top: 20rpx;
				font-weight: 700;
			}

			.font_3 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #000000;
			}

			.text_9 {
				text-align: right;
				margin-right: 8rpx;
				margin-top: 16rpx;
				color: #7f7f7f;
			}

			.group_3 {
				margin-top: 16rpx;
				padding: 0 8rpx;
				.image_5 {
					overflow: hidden;
					width: 16rpx;
					height: 16rpx;
				}

				.text_10 {
					color: #7f7f7f;
				}
			}

			.group_4 {
				margin-top: 20rpx;

				.text_11 {
					margin-top: 12rpx;
				}

				.group_5 {
					padding: 16rpx 0 40rpx;

					.text-wrapper_3 {
						padding: 20rpx 0;
						background-color: #000000;
						border-radius: 24rpx 24rpx 24rpx 0rpx;
						box-shadow: 0rpx 8rpx 44rpx #9fa3b740;
						width: 124rpx;

						.text_12 {
							color: #ffffff;
							font-weight: 700;
						}
					}

					.pos_3 {
					}
				}

				.group_6 {
					border-bottom: dotted 4rpx #e9ecf2;

					.image_6 {
						margin-left: 204rpx;
						overflow: hidden;
						width: 28rpx;
						height: 28rpx;
					}

					.group_7 {
						margin-top: -10rpx;
						padding: 8rpx 0 56rpx;

						.view {
							margin-top: 62rpx;
						}

						.view_2 {
							margin-top: 62rpx;
						}

						.view_3 {
							margin-top: 62rpx;
						}

						.view_4 {
							margin-top: 62rpx;
						}
					}
				}

				.divider {
					height: 4rpx;
					border-left: dotted 2rpx #e9ecf2;
					border-right: dotted 2rpx #e9ecf2;
					border-top: dotted 2rpx #e9ecf2;
					border-bottom: dotted 2rpx #e9ecf2;
				}
			}

			.font_6 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #808d9e;
			}

			.group_8 {
				margin-top: 20rpx;
				padding-left: 120rpx;
				padding-right: 4rpx;

				.text-wrapper_4 {
					width: 50rpx;
				}
			}

			.font_7 {
				font-size: 24rpx;
				font-family: Inter;
				color: #808d9e;
			}

			.text_15 {
				margin-top: 36rpx;
				color: #131216;
			}
			.table{
				padding: 0 20rpx;
				margin-top: 44rpx;
				font-size: 28rpx;
				.list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					text{
						font-weight: 500;
					}
					&:first-child {
						margin-top: 0;
					}
				}
				.header {
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						color:#999
					}
				}
				.left{
					flex:0.4;
				}
				.income{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 10rpx;
					padding: 4rpx 12rpx;
					background: #E9FAF0;
					color:#51844D;
					.middle{
						text-align: center;
						margin-left: 8rpx;
					}
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
				
				.right{
					flex:0.3;
					text-align: center;
					color:#51844D;
				}
				.fall-text{
					color: #CA5456;
				}
				.fall-box{
					background: #FFDFE5;
					color: #CA5456;
				}
			}
			
			.font_5 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #000000;
			}
			.section_4 {
				margin-top: 32rpx;
				padding: 24rpx;
				background-color: #f6f6f6;
				border-radius: 16rpx;
				.group_16 {
					margin-top: 28rpx;
					margin-bottom: 24rpx;
				}
				.group_17 {
					.group_18 {
						padding: 8rpx 0;

						.divider_2 {
							margin-left: 8rpx;
							background-color: #1a7b99;
							height: 4rpx;
						}
						.section_5 {
							width: 20rpx;
							background-color: #1a7b99;
							border-radius: 50%;
							height: 20rpx;
						}

						.pos_9 {
							position: absolute;
							left: 0;
							right: 610rpx;
							top: 0;
						}

						.pos_10 {
							position: absolute;
							left: 312rpx;
							right: 298rpx;
							top: 0;
						}
					}

					.section_6 {
						background-color: #1a7b99;
						border-radius: 50%;
						width: 20rpx;
						height: 20rpx;
					}
				}

					.divider_3 {
						margin-top: 16rpx;
						margin-right: 6rpx;
						background-color: #00000033;
						height: 2rpx;
					}
					.rich-content{
						margin: 24rpx 0;
						color: #333;
					}
					.section_7 {
						border-radius: 8rpx;
						
						.text_41 {
							font-weight: 700;
						}
						.group_20 {
							margin-top: 24rpx;
							.instruc-first{
								margin: 20rpx 0 ;
							}
							.instruc-title{
								flex:0.8
							}
							.instruc-text{
								flex:1;
								font-size: 12px;
								color: #333;
							}
							.text_42 {
								color: #999;
							}

						}
					}

					.section_8 {
						// padding: 0 24rpx;
						// background-color: #ffffff80;
						// border-radius: 8rpx;
						.group_22 {
							padding-bottom: 24rpx;
							border-bottom: solid 2rpx #00000033;

							.image_8 {
								margin-right: 4rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.group_23 {
							padding: 24rpx 0 40rpx;

							.group_24 {

								.text_47 {
									margin-bottom: 24rpx;
									color: #000000;
									font-size: 28rpx;
									font-family: SF Pro Display;
									font-weight: 700;
								}
							}

							.group_25 {
								margin:24rpx 0;
								.text_49 {
									color: #000000;
									font-size: 24rpx;
									font-family: SF Pro Display;
									font-weight: 700;
									margin-bottom: 24rpx;
								}
							}

							.text_48 {
								word-break: break-all;
							}
						}
					}

					.font_8 {
						font-size: 24rpx;
						font-family: SF Pro Display;
						color: #000000;
					}
				
			}

			.text_16 {
				color:#999
			}
			.btn_wrap{
				position: fixed;
				left:0;
				right: 0;
				bottom:0;
				width: 100%;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 32rpx;
				.btn {
					width: 100%;
					padding: 24rpx 0;
					text-align: center;
					background: #999;
					border-radius: 8rpx;
					color: #ffffff;
					font-weight: 700;
				}
				.buy{
					background-color: #1a7b99;
				}
			}
			
			.file-wrap{
				margin-top: 24rpx;
				padding: 24rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				text{
					font-weight: bold;
					font-size: 16px;
					color: #333333;
				}
			}
		

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #000000;
		}
	}
</style>